<template>
  <div>
    <ImpExcel dateFormat="YYYY-MM-DD"
              @success="loadDataSuccess">
      <a-button class="m-3">导入Excel</a-button>
    </ImpExcel>
    <a-table :dataSource="dataSource"
             :columns="columns"
             style="margin-top: 30px" />
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive, toRefs } from 'vue'

import { ImpExcel, ExcelData } from '@/components/Excel'
import bgUserApi from '@/api/bg_user/index'

export default defineComponent({
  components: { ImpExcel },

  setup() {
    const state: any = reactive({
      dataSource: [],
      columns: []
    })

    function loadDataSuccess(excelDataList: ExcelData[]) {
      console.log(
        '%c 🍝 excelDataList: ',
        'font-size:20px;background-color: #2EAFB0;color:#fff;',
        excelDataList
      )
      const { header, results } = excelDataList[0]
      console.log(
        '%c 🍦 results: ',
        'font-size:20px;background-color: #42b983;color:#fff;',
        results
      )
      console.log('%c 🦀 header: ', 'font-size:20px;background-color: #FCA650;color:#fff;', header)
      // let dataObj = {}
      // results.map((item) => {
      //   if (!dataObj[item['所在镇区']]) {
      //     dataObj[item['所在镇区']] = []
      //   }
      //   dataObj[item['所在镇区']].push({
      //     address: item['门店地址'],
      //     code: item['二维码给在线地址'],
      //     name: item['门店名称']
      //   })
      // })
      // console.log(
      //   '%c 🍧 dataObj: ',
      //   'font-size:20px;background-color: #93C0A4;color:#fff;',
      //   dataObj
      // )
      let arr: any[] = []
      results.forEach((item, index) => {
        arr.push({
          phone: item.phone,
          status: 1,
          createTime: '2022-01-12 11:30:30'
        })
      })
      console.log('%c 🥦 arr: ', 'font-size:20px;background-color: #EA7E5C;color:#fff;', arr)
      //@ts-ignore importWhiteData  importData  type: 1 黑名单  2白名单
      bgUserApi.importData({ content: arr }).then((res) => {
        console.log('%c 🌶 res1: ', 'font-size:20px;background-color: #33A5FF;color:#fff;', res)
      })
    }

    return {
      loadDataSuccess,
      ...toRefs(state)
    }
  }
})
</script>
